<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { AlarmClock, Cellphone } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
const useUser = useUserStore()

const formLabelAlign = ref({
  user: '',
  password: 123456,
  verificationCode: '',
})

// 表单验证规则
const rules = reactive({
  user: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { type: 'number', message: '输入内容应为数字', trigger: 'blur' },
  ],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  verificationCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})

let timer: any = null
const textState = ref<number | string>('发送验证码')

// 判断手机号码

const isUser = computed(() => {
  const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
  return reg.test(formLabelAlign.value.user)
})

// 点击获取验证码
let time = 60
const timerState = ref(false)
const verification = async () => {
  if (timerState.value) return
  timerState.value = true
  useUser.getPhoneCode(formLabelAlign.value.user)
    timer = setInterval(() => {
      if (time === 0 || !useUser.userState) {
        textState.value = '重新发送'
        time = 60
        useUser.clearPhoneCode()
        timerState.value = false
        return clearInterval(timer)
      }
      time--
      time > 9 ? (textState.value = time + 's') : time < 1 ? (textState.value = time + 's') : (textState.value = '0' + time + 's')
    }, 1000)
}
const ruleFormRef = ref()
const submitForm = (formEl: any) => {
  if (!formEl) return
  formEl.validate((valid: any, fields: any) => {
    if (valid && formLabelAlign.value.verificationCode === useUser.phoneCode) {
      useUser.getLogin(formLabelAlign.value.user)
    } else {
      if (fields) {
        for (var key in fields) {
          if (fields.hasOwnProperty(key)) {
            if (fields[key][0].fieldValue === '') {
              ElMessage({ type: 'error', message: fields[key][0].message })
            }
          }
        }
      } else {
        ElMessage({ type: 'error', message: '验证码错误' })
        return
      }
    }
  })
}
const flag = ref(true)

// 关闭时清空输入
const close = () => {
  formLabelAlign.value.user = ''
  formLabelAlign.value.verificationCode = ''
  ruleFormRef.value.resetFields()
}
</script>

<template>
  <div class="login">
    <el-dialog v-model="useUser.userState" title="用户登录" width="70%" @close="close">
      <div class="left">
        <el-form ref="ruleFormRef" :model="formLabelAlign" :rules="rules" label-position="left" label-width="80px" class="demo-ruleForm" status-icon v-if="flag" size="large">
          <el-form-item label="手机号：" prop="user">
            <el-input type="text" autocomplete="off" v-model.number.trim="formLabelAlign.user" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
          <el-form-item label="密  码：" prop="password">
            <el-input v-model.trim="formLabelAlign.password" placeholder="请输入密码" show-password maxlength="16" />
          </el-form-item>
          <el-form-item label="验证码：" prop="verificationCode">
            <el-input type="text" v-model.trim="formLabelAlign.verificationCode" placeholder="请输入验证码" class="elinput3" maxlength="6" />
            <el-button class="btn" plain type="primary" :icon="AlarmClock" @click.prevent="verification" :disabled="!isUser">{{ textState }}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit"> 登录 </el-button>
          </el-form-item>
        </el-form>
        <div class="wechat" v-else>
          <h2>微信登录</h2>
          <img src="../../assets/images/code_login_wechat.png" alt="" />
          <span>使用微信扫一扫登录</span>
        </div>
        <div @click="flag = !flag">
          <div class="tripartite" v-if="flag">
            <img src="https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png" alt="" />
            <span>第三方账户登录</span>
          </div>
          <div class="tripartite" v-else>
            <el-icon size="25" class="elicon"><Cellphone /></el-icon>
            <span>手机号登录</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <div>
            <img src="../../assets/images/code_login_wechat.png" alt="" />
            <p>
              <img src="https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png" alt="" />
              <span>微信扫一扫关注</span>
              <span>“快速预约挂号”</span>
            </p>
          </div>
          <div>
            <img src="../../assets/images/code_login_wechat.png" alt="" />
            <p>
              <img src="../../assets/images/logo.png" alt="" />
              <span>扫一扫下载</span>
              <span>“预约挂号”APP</span>
            </p>
          </div>
        </div>

        <div class="bottom">
          <h2>xxxxxx官方指定平台</h2>
          <p>快速挂号 安全放心</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.login {
  :deep(.el-dialog) {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    background-color: #f7fbff;
    background-image: url();
    background-repeat: repeat;
  }
  :deep(.el-dialog__body) {
    display: flex;
    justify-content: center;
    // align-items: center;
  }
  .left {
    flex: 2;
    position: relative;
    height: 400px;
    padding: 15px 20px;
    box-shadow: 0 0 20px 0 rgba(73, 144, 241, 0.2);
    .wechat {
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        font-size: 20px;
        font-weight: 700;
      }
      img {
        width: 240px;
        height: 240px;
        padding: 10px;
        margin: 10px;
        border: 1px solid #ccc;
      }
      span {
        font-size: 13px;
      }
    }
    .btn {
      position: absolute;
      width: 100px;
      right: 1px;
      height: 38px;
      border: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .elinput2 {
      :deep(.el-input__suffix) {
        padding-right: 25px;
      }
    }
    .elinput3 {
      :deep(.el-input__suffix) {
        padding-right: 100px;
      }
    }
    .tripartite {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 10px;
      color: gray;
      img {
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
        border-radius: 10px;
      }
      .elicon {
        width: 40px;
        height: 40px;
        color: #4474fa;
      }
      &:hover {
        color: #55a6f1;
      }
    }
    .submit {
      width: 100%;
      height: 40px;
      margin-left: -40px;
    }
  }
  .right {
    flex: 3;
    padding: 0 20px;
    .top {
      display: flex;
      justify-content: space-around;
      align-items: center;
      div {
        img {
          width: 150px;
          height: 150px;
        }
        p {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 10px;
          img {
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }
          span {
            margin-top: 10px;
          }
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 25px;
      padding-top: 60px;
      font-style: italic;
      letter-spacing: 4px;
      h2 {
        margin-bottom: 25px;
      }
    }
  }
}

:deep(.el-form) {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 85%;
}
</style>
